<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 70%;margin-left: 20%;" class="container">
        <strong align="center">
            <span style="color: red;">备忘录:今天</span>
            <span style="color: blue;"  class="today"></span>
            <button onclick="showInputForm()" id="submit">添加备忘录</button>
        </strong>
    </div>
    <form style="display: none;" name="inputform" class="container" method="get">
        日期:<input name="dateinput" type="date"  > <br>
        备忘录:<input type="text" id="zcinput" placeholder="请输入备忘录信息"><br>
        <div>
            <input type="button" id="tijiao" onclick="addMemo()" value="确定">
            <input type="button" onclick="resetInput()" value="重置">
        </div>
    </form>
    <ul id="list1"> </ul>
    <script>
        function saveStorage(desc){
            var item = sessionStorage.getItem('desc');
            if((item==undefined)||(item==null)) item=desc+";";
            else item+=desc+";";
            sessionStorage.setItem("desc",item);
        }
        function restore(){
            var ul=document.getElementById('list1');
            var desc=sessionStorage.getItem("desc");
            if(desc==undefined||desc==null) return;
            var items=desc.split(";")
            for(let i=0;i<items.length;i++){
                if(items[i]==null||items[i]=="") continue;
                var li=document.createElement('li');
                li.innerHTML=items[i];
                ul.appendChild(li);
            }
        }
        restore();
        var today=new Date();
        var week=today.getDay();
        var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        document.getElementsByClassName("today")[0].innerHTML=weekday[week];
        var bot=document.getElementById("tijiao");
        var lis=document.getElementById("list1");
        var inpu=document.getElementById("zcinput");
        var myBtn=document.inputform.dateinput;
        var clickNum=0;
        function myBtnClick(){
            clickNum++;
            myBtn.value=clickNum;
        }
        myBtn.addEventListener("click",myBtnClick);
        function addMemo(){
            var today=new Date();
            var str={year:'numeric',weekday:'long',month:'numeric',day:'numeric'};
            var datestr=today.toLocaleDateString('zh-CN',str)+' '+inpu.value;
            var li=document.createElement("li");
            li.textContent=datestr;
            lis.appendChild(li);
            inpu.value=" ";
            resetInput();
            showInputForm();
            saveStorage(datestr);
            console.log(sessionStorage.getItem("desc"));
        }
        
        function getCurrentDate(){
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0');
            var yyyy = today.getFullYear();
            return yyyy+'-'+mm+'-'+dd;
        }
        function showInputForm(){
            var form=document.inputform;
            if(form.style.display=="none"){
                form.style.display="block";
            }
            else form.style.display="none";
        }
        function resetInput(){
            document.inputform.dateinput.value=getCurrentDate();
            document.getElementById("zcinput").value="";
        }
    </script>
</body>
</html>